<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渠道管理 - AI Bot Platform</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="../styles.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-gray-100">
    <div id="app">
        <!-- 主要内容区域 -->
        <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 页面标题 -->
            <div class="px-4 sm:px-0 mb-8">
                <div class="flex justify-between items-center">
                    <h2 class="text-2xl font-bold">渠道管理</h2>
                    <button onclick="showChannelModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
                        <i class="fas fa-plus mr-2"></i>添加渠道
                    </button>
                </div>
            </div>

            <!-- 渠道列表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
                <!-- 网页渠道卡片 -->
                <div class="card p-6 bg-gray-800 rounded-lg shadow-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                                <i class="fas fa-globe text-white"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold">网页聊天插件</h3>
                                <p class="text-sm text-gray-400">已部署 · 在线</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    <div class="mb-4">
                        <div class="flex items-center text-sm text-gray-400 mb-2">
                            <i class="fas fa-code mr-2"></i>
                            <span>集成代码</span>
                        </div>
                        <div class="bg-gray-900 p-2 rounded-md">
                            <code class="text-xs text-gray-300">&lt;script src="https://bot.example.com/widget.js"&gt;&lt;/script&gt;</code>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-2">
                            <span class="px-2 py-1 bg-blue-900 text-blue-300 text-xs rounded-full">网页</span>
                            <span class="px-2 py-1 bg-green-900 text-green-300 text-xs rounded-full">活跃</span>
                        </div>
                        <button class="text-blue-400 hover:text-blue-300">
                            <i class="fas fa-cog mr-1"></i>配置
                        </button>
                    </div>
                </div>

                <!-- 微信渠道卡片 -->
                <div class="card p-6 bg-gray-800 rounded-lg shadow-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
                                <i class="fab fa-weixin text-white"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="text-lg font-semibold">微信公众号</h3>
                                <p class="text-sm text-gray-400">待配置</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    <div class="mb-4">
                        <p class="text-gray-400">将AI机器人接入到您的微信公众号</p>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-2">
                            <span class="px-2 py-1 bg-gray-700 text-gray-300 text-xs rounded-full">微信</span>
                            <span class="px-2 py-1 bg-yellow-900 text-yellow-300 text-xs rounded-full">待配置</span>
                        </div>
                        <button class="text-blue-400 hover:text-blue-300">
                            <i class="fas fa-plus-circle mr-1"></i>配置
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <!-- 添加渠道模态框 -->
        <div id="channelModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold">添加新渠道</h3>
                    <button onclick="hideChannelModal()" class="text-gray-400 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 flex flex-col items-center">
                        <i class="fas fa-globe text-3xl mb-2 text-blue-400"></i>
                        <span class="text-sm">网页插件</span>
                    </button>
                    <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 flex flex-col items-center">
                        <i class="fab fa-weixin text-3xl mb-2 text-green-400"></i>
                        <span class="text-sm">微信公众号</span>
                    </button>
                    <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 flex flex-col items-center">
                        <i class="fab fa-slack text-3xl mb-2 text-purple-400"></i>
                        <span class="text-sm">Slack</span>
                    </button>
                    <button class="p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 flex flex-col items-center">
                        <i class="fab fa-telegram text-3xl mb-2 text-blue-400"></i>
                        <span class="text-sm">Telegram</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #4B5563;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #3B82F6;
        }

        input:checked + .slider:before {
            transform: translateX(24px);
        }

        .slider.round {
            border-radius: 24px;
        }

        .slider.round:before {
            border-radius: 50%;
        }
    </style>

    <script>
        function showChannelModal() {
            document.getElementById('channelModal').classList.remove('hidden');
        }

        function hideChannelModal() {
            document.getElementById('channelModal').classList.add('hidden');
        }
    </script>
</body>
</html> 